.Toolbar {
  position: relative;
}

.jsf-logo {
  transition: all .3s;
  height: 80px;
  width: 100%;
  background-image: url(/img/logo.svg);
  background-repeat: no-repeat;

  &:hover { opacity: .8; }

  a {
    height: 80px;
    width: 320px;
    overflow: hidden;
    text-indent: -640px;
  }
}

.jsf-about {
  li {
    > .menu {
      display: none;
      position: absolute;
      padding: @padding;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
      background-color: rgba(255, 255, 255, .95);
    }

    &:hover > .menu {
      display: block;
    }

    li ~ li { margin-top: @margin; }

    li:hover:before {
      color: @BLUE;
    }

    li:before {
      top: 4px;
      left: -5px;
      position: absolute;
      transition: all .3s;
      content: '⟀';
      font-size: 15px;
      color: @border-color;
      transform: rotate(225deg);
    }

    li {
      white-space: nowrap;
      position: relative;
      padding-left: 10px;
    }

    a {
      color: @BLUE;
      text-decoration: none;
      border-bottom: 1px dotted @border-color;

      &:hover { border-bottom: 1px dotted @BLUE; }
    }
  }

  p, h2, h3, h4 {
    margin-bottom: @margin;
  }
}

.github-ribbon {
  transform: rotate(40deg);
  background: @border-color;
  color: white;
  width: 200px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  z-index: 999;
  right: -50px;
  top: 35px;
}
